<!Doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <title>工具栏</title>
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link id="bootstrap-style" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        .imgStyle{
            margin: 0 !important;
        }
    </style>
    <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
    <script type="text/javascript">
        mxBasePath = '../static';
    </script>

    <!-- 引入支持库文件 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/mxClient.js}"></script>


    <!-- 示例代码 -->
    <script type="text/javascript">
        //  程序在此方法中启动
        function up(obj){
            var div1=document.getElementById("tbContainer");
            console.log(1);
            if(div1.style.display=="block"){
                div1.style.display="none";
                obj.src="img2/collapsed.gif";
            }else{
                div1.style.display="block";
                obj.src="img2/expanded.gif";
            }
        }
        function up1(obj){
            var div1=document.getElementById("tbContainer1");
            console.log(1);
            if(div1.style.display=="block"){
                div1.style.display="none";
                obj.src="img2/collapsed.gif";
            }else{
                div1.style.display="block";
                obj.src="img2/expanded.gif";
            }
        }
        function mxIconSet(state)
        {
            this.images = [];
            var graph = state.view.graph;



            // Delete
            var img = mxUtils.createImage('img2/delete2.png');
            img.setAttribute('title', 'Delete');
            img.style.position = 'absolute';
            img.style.cursor = 'pointer';
            img.style.width = '16px';
            img.style.height = '16px';
            img.style.left = (state.x + state.width) + 'px';
            img.style.top = (state.y - 16) + 'px';

            mxEvent.addGestureListeners(img,
                mxUtils.bind(this, function(evt)
                {
                    // Disables dragging the image
                    mxEvent.consume(evt);
                })
            );

            mxEvent.addListener(img, 'click',
                mxUtils.bind(this, function(evt)
                {
                    graph.removeCells([state.cell]);
                    mxEvent.consume(evt);
                    this.destroy();
                })
            );

            state.view.graph.container.appendChild(img);
            this.images.push(img);
        };

        mxIconSet.prototype.destroy = function()
        {
            if (this.images != null)
            {
                for (var i = 0; i < this.images.length; i++)
                {
                    var img = this.images[i];
                    img.parentNode.removeChild(img);
                }
            }

            this.images = null;
        };
        function main()
        {
            //定义新连接的图标
            mxConnectionHandler.prototype.connectImage = new mxImage('img2/connector.gif', 16, 16);
            var deleteImage = new mxImage('img2/forbidden.png', 16, 16);
            // 检测浏览器兼容性
            if (!mxClient.isBrowserSupported())
            {
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                // 创建工具栏容器
                var tbContainer = document.createElement('div');
                tbContainer.style.position = 'absolute';
                tbContainer.setAttribute("id","tbContainer");
                tbContainer.style.overflowY= 'scroll';
                tbContainer.style.display = 'block';
                tbContainer.style.padding = '2px';
                tbContainer.style.left = '0px';
                tbContainer.style.top = '26px';
                tbContainer.style.width = '150px';
                // tbContainer.style.boxSizing = 'border-box';
                tbContainer.style.bottom = '0px';
                tbContainer.style.paddingLeft = '0px';
                tbContainer.style.overflowX = 'hidden';


                // tbContainer.style.borderRight = '2px solid #000';
                tbContainer.style.backgroundColor = 'white';

                document.body.appendChild(tbContainer);

                // 创建工具栏监听工具
                var toolbar = new mxToolbar(tbContainer);
                toolbar.enabled = false
                // 创建工具栏容器
                var tbContainer1 = document.createElement('div');
                tbContainer1.style.position = 'absolute';
                tbContainer1.setAttribute("id","tbContainer1");
                tbContainer1.style.overflow = 'scroll';
                tbContainer1.style.padding = '2px';
                tbContainer1.style.right = '0px';
                tbContainer1.style.top = '26px';
                tbContainer1.style.width = '80px';
                tbContainer1.style.bottom = '0px';
                tbContainer.style.boxSizing = 'border-box';
                tbContainer1.style.paddingLeft = '10px';
                tbContainer1.style.paddingRight = '5px';
                document.body.appendChild(tbContainer1);

                // 创建工具栏监听工具
                var toolbar1 = new mxToolbar(tbContainer1);
                toolbar1.enabled = false

                // 在图形中创建容器
                container = document.createElement('div');
                container.style.position = 'absolute';
                // container.style.backgroundColor = '#578ebe';
                container.style.overflow = 'scroll';
                container.style.left = '156px';
                container.style.top = '26px';
                container.style.right = '85px';
                container.style.bottom = '0px';
                // container.style.background = 'url("editors/images/grid.gif")';
                container.style.background = 'url("img2/grid.gif")';
                // container.style.backgroundColor = 'white';


                document.body.appendChild(container);

                // 解决IE浏览器忽略的样式
                if (mxClient.IS_QUIRKS)
                {
                    document.body.style.overflow = 'scroll';
                    new mxDivResizer(tbContainer);
                    new mxDivResizer(container);
                }

                // 在容器中创建图形和模型
                var model = new mxGraphModel();
                var graph = new mxGraph(container, model);
                var button=document.createElement("button");
                var divButton=document.createElement('div');
                button.innerHTML="保存";
                button.setAttribute("type","button");
                button.setAttribute("class","btn btn-primary")
                button.setAttribute("id","saveChart");
                divButton.style.position='absolute';
                // divButton.style.width="50px";
                // divButton.style.width="50px";
                divButton.style.right='100px';
                divButton.style.top='0px';
                divButton.appendChild(button);
                document.body.appendChild(divButton);
                // $.ajax({
                //     type: "GET",
                //     url: "/power/energyType/getAllEnergyType",
                //     dataType: "json",
                //     async: false,
                //     success: function (data) {
                //         var energyList=data;
                //         for(var i=0;i<energyList.length;i++){
                //             var img = mxUtils.createImage('img2/arrowImg2.png');
                //             var imgDiv = document.createElement("div");
                //             imgDiv.style.position = 'relative';
                //             imgDiv.style.left = "20px";
                //             imgDiv.style.width = "40px";
                //             imgDiv.style.height = "40px";
                //             imgDiv.style.marginBottom = "10px";
                //             imgDiv.style.backgroundColor = "#568dbd";
                //             imgDiv.appendChild(img);
                //             var img1 = mxUtils.createImage(energyList[i].iconPath);
                //             img1.style.width = '15px';
                //             img1.style.height = '15px';
                //             var imgDiv1 = document.createElement("div");
                //             imgDiv1.style.position = 'absolute';
                //             imgDiv1.appendChild(img1);
                //             imgDiv1.style.top = "50%";
                //             imgDiv1.style.left = "50%";
                //             imgDiv1.setAttribute('title',energyList[i].typeName);
                //             imgDiv1.style.transform = "translate(-50%,-50%)";
                //             imgDiv.appendChild(imgDiv1);
                //             img.style.width = '40px';
                //             img.style.height = '40px';
                //             img.style.zIndex = "999";
                //             img.setAttribute("title",energyList[i].typeName);
                //             tbContainer1.appendChild(imgDiv);
                //             document.body.appendChild(tbContainer1);
                //             var graphF = function(evt)
                //             {
                //                 var x = mxEvent.getClientX(evt);
                //                 var y = mxEvent.getClientY(evt);
                //                 var elt = document.elementFromPoint(x, y);
                //
                //                 // for (var i = 0; i < graphs.length; i++)
                //                 // {
                //                 if (mxUtils.isAncestorNode(graph.container, elt))
                //                 {
                //                     return graph;
                //                 }
                //                 // }
                //
                //                 return null;
                //             };
                //             var typeName=[];
                //             typeName.push(energyList[i].typeName);
                //             // var funct = function(graph, evt, target, x, y)
                //             // {
                //             //     var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                //             //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                //             //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //             //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                //             //     cell.geometry.relative = true;
                //             //     cell.edge = true;
                //             //     var cells = graph.importCells([cell], x, y, target);
                //             //
                //             //     if (cells != null && cells.length > 0)
                //             //     {
                //             //         graph.scrollCellToVisible(cells[0]);
                //             //         graph.setSelectionCells(cells);
                //             //     }
                //             // };
                //             function funct(graph, evt,target, x, y)
                //             {
                //                 console.log(graph);
                //                 var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                //                 cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                //                 cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //                 //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                //                 cell.geometry.relative = true;
                //                 cell.edge = true;
                //                 var cells = graph.importCells([cell], x, y, target);
                //
                //                 if (cells != null && cells.length > 0)
                //                 {
                //                     graph.scrollCellToVisible(cells[0]);
                //                     graph.setSelectionCells(cells);
                //                 }
                //             };
                //             var dragElt = document.createElement('div');
                //             dragElt.style.border = 'dashed black 1px';
                //             dragElt.style.width = '120px';
                //             dragElt.style.height = '40px';
                //
                //             var ds = mxUtils.makeDraggable(img, graphF,funct, dragElt, null, null, graph.autoscroll, true);
                //
                //             // Redirects feature to global switch. Note that this feature should only be used
                //             // if the the x and y arguments are used in funct to insert the cell.
                //             ds.isGuidesEnabled = function()
                //             {
                //                 return graph.graphHandler.guidesEnabled;
                //             };
                //
                //             // Restores original drag icon while outside of graph
                //             ds.createDragElement = mxDragSource.prototype.createDragElement;
                //         }
                //     }
                // })



                //去锯齿效果
                mxRectangleShape.prototype.crisp = true;
                // 显示导航线
                mxGraphHandler.prototype.guidesEnabled = true;
                // Defines the tolerance before removing the icons
                var iconTolerance = 20;

                // Shows icons if the mouse is over a cell
                graph.addMouseListener(
                    {
                        currentState: null,
                        currentIconSet: null,
                        mouseDown: function(sender, me)
                        {
                            // Hides icons on mouse down
                            if (this.currentState != null)
                            {
                                this.dragLeave(me.getEvent(), this.currentState);
                                this.currentState = null;
                            }
                        },
                        mouseMove: function(sender, me)
                        {
                            if (this.currentState != null && (me.getState() == this.currentState ||
                                me.getState() == null))
                            {
                                var tol = iconTolerance;
                                var tmp = new mxRectangle(me.getGraphX() - tol,
                                    me.getGraphY() - tol, 2 * tol, 2 * tol);

                                if (mxUtils.intersects(tmp, this.currentState))
                                {
                                    return;
                                }
                            }

                            var tmp = graph.view.getState(me.getCell());

                            // Ignores everything but vertices
                            if (graph.isMouseDown || (tmp != null && !graph.getModel().isVertex(tmp.cell)))
                            {
                                tmp = null;
                            }

                            if (tmp != this.currentState)
                            {
                                if (this.currentState != null)
                                {
                                    this.dragLeave(me.getEvent(), this.currentState);
                                }

                                this.currentState = tmp;

                                if (this.currentState != null)
                                {
                                    this.dragEnter(me.getEvent(), this.currentState);
                                }
                            }
                        },
                        mouseUp: function(sender, me) { },
                        dragEnter: function(evt, state)
                        {
                            if (this.currentIconSet == null)
                            {
                                this.currentIconSet = new mxIconSet(state);
                            }
                        },
                        dragLeave: function(evt, state)
                        {
                            if (this.currentIconSet != null)
                            {
                                this.currentIconSet.destroy();
                                this.currentIconSet = null;
                            }
                        }
                    });

                //在图中，启用新的连接
                graph.setConnectable(false);
                graph.setMultigraph(false);
                var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                var styleEdge1 = mxUtils.clone(styleEdge);
                styleEdge1[mxConstants.STYLE_FONTCOLOR]="white";
                styleEdge1[mxConstants.STYLE_FONTSIZE]="14";
                styleEdge1[mxConstants.STYLE_STROKECOLOR]="white";
                // 按下回车和空格键停止编辑
                var keyHandler = new mxKeyHandler(graph);
                var rubberband = new mxRubberband(graph);
                var addVertex = function(id,name,icon, w, h, style)
                {
                    var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                    // vertex.setId(id);
                    // console.log("id="+id);
                    vertex.setVertex(true);
                    console.log(icon);
                    // var img= addToolbarItem(name,graph, toolbar, vertex, icon);
                    addToolbarItem(id,name,graph, toolbar, vertex, icon);

                    // console.log(img);
                    // img.enabled = true;
                    // img.style.width="40px";
                    // img.setAttribute('title', name);
                    // img.style.backgroundColor="#578ebe";
                };
                var addEdge=function(name,icon,w,h,style){
                    var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;');
                    // var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), style);
                    cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                    cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                    //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                    cell.geometry.relative = true;
                    cell.edge = true;
                    // var img= addToolbarItem1(name,graph, toolbar1, cell, icon);
                    addToolbarItem1(name,graph, toolbar1, cell, icon);
                    // img.style.width="40px";
                    // img.setAttribute('title', name);
                    // img.style.backgroundColor="#578ebe";

                }
                // addEdge("冷",'img2/arrowImg1.png',50,50,'')
                // addEdge("热",'img2/arrowImg1.png',50,50,'');

                // var graphF = function(evt)
                // {
                //     var x = mxEvent.getClientX(evt);
                //     var y = mxEvent.getClientY(evt);
                //     var elt = document.elementFromPoint(x, y);
                //
                //     // for (var i = 0; i < graphs.length; i++)
                //     // {
                //     if (mxUtils.isAncestorNode(graph.container, elt))
                //     {
                //         return graph;
                //     }
                //     // }
                //
                //     return null;
                // };
                // var funct = function(graph, evt, target, x, y)
                // {
                //     var cell = new mxCell('冷', new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                //     cell.geometry.relative = true;
                //     cell.edge = true;
                //     var cells = graph.importCells([cell], x, y, target);
                //
                //     if (cells != null && cells.length > 0)
                //     {
                //         graph.scrollCellToVisible(cells[0]);
                //         graph.setSelectionCells(cells);
                //     }
                // };
                // var dragElt = document.createElement('div');
                // dragElt.style.border = 'dashed black 1px';
                // dragElt.style.width = '120px';
                // dragElt.style.height = '40px';
                //
                // var ds = mxUtils.makeDraggable(img, graphF,funct, dragElt, null, null, graph.autoscroll, true);
                //
                // // Redirects feature to global switch. Note that this feature should only be used
                // // if the the x and y arguments are used in funct to insert the cell.
                // ds.isGuidesEnabled = function()
                // {
                //     return graph.graphHandler.guidesEnabled;
                // };
                //
                // // Restores original drag icon while outside of graph
                // ds.createDragElement = mxDragSource.prototype.createDragElement;
                // var addEdge = function(name,icon, w, h, style)
                // {
                //     var edge = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                //     edge.setEdge(true);
                //     var img= addToolbarItemEdge(graph, toolbar1, edge, icon);
                //     console.log(img);
                //     img.enabled = true;
                //     img.style.width="40px";
                //     img.setAttribute('title', name);
                //     img.style.backgroundColor="#578ebe";
                // };
                //插入线条设置连接图形
                $.ajax({
                    type: "GET",
                    url: "/power/relationship/getDragChart/" + 4,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        var node = data.node;
                        var edge = data.edge;
                        var nodeLength = data.node.length;
                        var edgeLength = data.edge.length;
                        console.log(node);
                        console.log(edge);
                        console.log(nodeLength);

                        var styleName=[];
                        for(var i=0;i<nodeLength;i++){
                            var style = graph.getStylesheet().getDefaultVertexStyle();
                            var style1 = mxUtils.clone(style);
                            // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                            // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                            // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                            // style=mxUtils.clone(style);
                            // console.log(node[j].picPath);
                            style1[mxConstants.STYLE_SHAPE]=mxConstants.SHAPE_LABEL;
                            // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_VERTICAL_ALIGN]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_IMAGE_ALIGN]=mxConstants.ALIGN_CENTER;
                            style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]=mxConstants.ALIGN_TOP;

                            style1[mxConstants.STYLE_STROKECOLOR]="transparent";
                            style1[mxConstants.STYLE_FILLCOLOR]="#578ebe";
                            style1[mxConstants.STYLE_FONTCOLOR]="white";
                            style1[mxConstants.STYLE_FONTSIZE]="14";


                            style1[mxConstants.LABEL_HANDLE_SIZE]=50;
                            style1[mxConstants.STYLE_LABEL_POSITION]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_IMAGE_WIDTH]=50;
                            style1[mxConstants.STYLE_IMAGE_HEIGHT]=50;
                            style1[mxConstants.STYLE_IMAGE]=node[i].picPath;
                            styleName[i]='style'+i;
                            console.log(styleName[i]);
                            graph.getStylesheet().putCellStyle(styleName[i],style1);
                            addVertex(node[i].deviceId,node[i].deviceName,node[i].picPath,100,80,styleName[i]);
                            // toolbar.addLine();
                            // var vertex = new mxCell(node[i].deviceName, new mxGeometry(0, 0, 100, 80), styleName[i]);
                            // vertex.setVertex(true);
                            //
                            // var img= addToolbarItem(graph, toolbar, vertex, node.picPath);
                            // img.enabled = true;
                            // img.style.width="80px";
                            // img.setAttribute('title', node[i].deviceName);
                        }
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "/power/energyType/getAllEnergyType",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        var energyList=data;
                        var styleNameEdge=[];
                        for(var i=0;i<energyList.length;i++){
                            // styleNameEdge[i]='styleEdge'+i;
                            // var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                            // var styleEdge1 = mxUtils.clone(styleEdge);
                            // styleEdge1[mxConstants.STYLE_FONTCOLOR]="white";
                            // styleEdge1[mxConstants.STYLE_FONTSIZE]="14";
                            // styleEdge1[mxConstants.STYLE_STROKECOLOR]="white";
                            // styleEdge1[mxConstants.STYLE_IMAGE_BACKGROUND]=energyList[i].iconPath;
                            // styleEdge1[mxConstants.STYLE_IMAGE]=energyList[i].iconPath;
                            // graph.getStylesheet().putCellStyle('edge1',styleEdge1);
                            addEdge(energyList[i].typeName,energyList[i].iconPath,50,50,'');
                        }
                    }
                })
                // var addVertex = function(name,icon, w, h, style)
                // {
                //     var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                //     vertex.setVertex(true);
                //
                //    var img= addToolbarItem(graph, toolbar, vertex, icon);
                //    console.log(img);
                //     // img.enabled = true;
                //     // img.style.width="80px";
                //     // img.setAttribute('title', name);
                // };
                // var style = graph.getStylesheet().getDefaultVertexStyle();
                // var style1 = mxUtils.clone(style);
                // // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                // // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                // // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                // // style=mxUtils.clone(style);
                // // console.log(node[j].picPath);
                // style1[mxConstants.STYLE_SHAPE]=mxConstants.SHAPE_LABEL;
                // // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_VERTICAL_ALIGN]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_IMAGE_ALIGN]=mxConstants.ALIGN_CENTER;
                // style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]=mxConstants.ALIGN_TOP;
                //
                // style1[mxConstants.STYLE_STROKECOLOR]="transparent";
                // style1[mxConstants.STYLE_FILLCOLOR]="transparent";
                // style1[mxConstants.STYLE_FONTCOLOR]="black";
                // style1[mxConstants.STYLE_FONTSIZE]="14";
                // //
                // //
                // style1[mxConstants.LABEL_HANDLE_SIZE]=50;
                // style1[mxConstants.STYLE_LABEL_POSITION]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_IMAGE_WIDTH]=50;
                // style1[mxConstants.STYLE_IMAGE_HEIGHT]=50;
                // style1[mxConstants.STYLE_IMAGE]='http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png';
                // graph.getStylesheet().putCellStyle('style1',style1);
                // addVertex('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 100, 80, 'style1');
                // addVertex('editors/images/rounded.gif', 100, 40, '');
                // addVertex('editors/images/ellipse.gif', 40, 40, '');
                // addVertex('editors/images/rhombus.gif', 40, 40, '');
                // addVertex('editors/images/triangle.gif', 40, 40, '');
                // addVertex('editors/images/cylinder.gif', 40, 40, '');
                // addEdge('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 30, 40, '');
                // toolbar.addLine();
                // graph.container.setAttribute('tabindex', '-1');
                // graph.container.focus();



                // var button = mxUtils.button('Create toolbar entry from selection', function(evt)
                // {
                //     if (!graph.isSelectionEmpty())
                //     {
                //         // 创建一个副本，并保存它的状态
                //         var cells = graph.getSelectionCells();
                //         var bounds = graph.getView().getBounds(cells);
                //
                //         // 添加、删除功能
                //         var funct = function(graph, evt, cell)
                //         {
                //             graph.stopEditing(false);
                //
                //             var pt = graph.getPointForEvent(evt);
                //             var dx = pt.x - bounds.x;
                //             var dy = pt.y - bounds.y;
                //
                //             var clones = graph.importCells(cells, dx, dy);
                //             graph.setSelectionCells(clones);
                //         }
                //
                //         // 创建拖动预览图标
                //         var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
                //         mxUtils.makeDraggable(img, graph, funct);
                //     }
                // });

                var deviceDiv=document.createElement("div");
                deviceDiv.innerHTML="设备列表";
                deviceDiv.style.fontSize="14px";
                deviceDiv.style.position="absolute";
                deviceDiv.style.top="0px";
                var deviceDiv1=document.createElement("div");
                deviceDiv1.innerHTML="属性列表";
                deviceDiv1.style.fontSize="14px";
                deviceDiv1.style.position="absolute";
                deviceDiv1.style.top="0px"
                deviceDiv1.style.right="10px";
                var img=document.createElement("img");
                img.setAttribute("src","img2/expanded.gif");
                img.setAttribute("onclick","up(this)");
                img.style.width="20px";
                img.style.height="20px";
                img.style.position="absolute";
                img.style.top="0px";
                img.style.left="65px";
                var img1=document.createElement("img");
                img1.setAttribute("src","img2/expanded.gif");
                img1.setAttribute("onclick","up1(this)");
                img1.style.width="20px";
                img1.style.height="20px";
                img1.style.position="absolute";
                img1.style.top="0px";
                img1.style.right="65px";
                document.body.appendChild(deviceDiv);
                document.body.appendChild(img);
                document.body.appendChild(img1);
                document.body.appendChild(deviceDiv1);
                // button.style.position = 'absolute';
                // button.style.left = '2px';
                // button.style.top = '2px';
                // document.body.appendChild(button);
                $("#saveChart").click(function(){
                    var encoder = new mxCodec();
                    var node = encoder.encode(graph.getModel());
                    var xml=mxUtils.getXml(node);
                    console.log(xml);
                    console.log(typeof xml);
                    // $.ajax({
                    //     type: "GET",
                    //     url: "/power/device/updateDeviceCoordinates",
                    //     dataType: "json",
                    //     async:false,
                    //     data:{xmlString:xml},
                    //     success: function (data) {
                    //         if(data.message=='success'){
                    //             layer.alert('保存成功!', {
                    //
                    //                 icon: 6,
                    //
                    //                 title: "提示"
                    //
                    //             });
                    //         }
                    //     }
                    // })
                })
            }
        }

        function addToolbarItem(id,name,graph, toolbar, prototype, image)
        {
            // 添加、删除功能
            var funct = function(graph, evt, cell)
            {
                graph.stopEditing(false);

                var pt = graph.getPointForEvent(evt);
                var vertex = graph.getModel().cloneCell(prototype);
                vertex.setId(id);
                // var vertex = graph.getModel().cloneInvalidEdges(prototype);
                vertex.geometry.x = pt.x;
                vertex.geometry.y = pt.y;

                graph.addCell(vertex);
                graph.setSelectionCell(vertex);
            }
            // 创建拖动预览图标
            var img = toolbar.addMode(null, image, funct);
            var imgDiv=document.createElement("div");
            var imgDiv2=document.createElement('div');
            imgDiv2.style.backgroundColor="#568dbd";
            img.style.width="40px";
            img.style.height="40px";
            img.setAttribute('class',"imgStyle")
            // imgDiv.style.position = 'relative';
            // imgDiv.style.left = "20px";
            imgDiv.style.width = "40px";
            // imgDiv.style.height = "40px";
            imgDiv.style.marginBottom = "40px";
            imgDiv.style.textAlign = "center";
            imgDiv2.style.width="40px";
            imgDiv2.style.position='relative';
            imgDiv2.style.left='46px';


            // imgDiv.style.backgroundColor = "#568dbd";
            imgDiv2.appendChild(img);
            imgDiv.appendChild(imgDiv2);
            var imgDiv1=document.createElement('div');
            imgDiv1.innerHTML=name;
            imgDiv1.style.width="133px";
            imgDiv1.style.wordWrap="break-word";
            imgDiv1.style.position="absolute";
            imgDiv1.style.textAlign="center";
            imgDiv.appendChild(imgDiv1);
            mxUtils.makeDraggable(imgDiv, graph, funct);
            var mytoolBar1=document.getElementById("tbContainer");
            mytoolBar1.appendChild(imgDiv);
            // return img;
        }


        function addToolbarItem1(name,graph, toolbar, prototype, image)
        {
            // 添加、删除功能

            function funct(graph, evt,target, x, y)
            {
                var cell = new mxCell(name+'('+"损耗率:"+')',new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;');
                cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                cell.geometry.relative = true;
                cell.edge = true;
                var cells = graph.importCells([cell], x, y, target);

                if (cells != null && cells.length > 0)
                {
                    graph.scrollCellToVisible(cells[0]);
                    graph.setSelectionCells(cells);
                }
            };
            // 创建拖动预览图标
            var img = toolbar.addMode(null, image, funct);
            var img1 = mxUtils.createImage('img2/arrowImgUse.png');
            var imgDiv = document.createElement("div");
            imgDiv.style.position = 'relative';
            imgDiv.style.left = "20px";
            imgDiv.style.width = "40px";
            imgDiv.style.height = "40px";
            imgDiv.style.marginBottom = "10px";
            imgDiv.style.backgroundColor = "#568dbd";
            img1.style.width = '40px';
            img1.style.height = '40px';
            img1.style.zIndex = "999";
            img1.setAttribute("title",name);
            imgDiv.appendChild(img1);
            // var img1 = mxUtils.createImage(image);
            img.style.width = '20px';
            img.style.height = '20px';
            img.style.margin="0px";
            var imgDiv1 = document.createElement("div");
            imgDiv1.style.position = 'absolute';
            imgDiv1.appendChild(img);
            imgDiv1.style.top = "50%";
            imgDiv1.style.left = "50%";
            imgDiv1.setAttribute('title',name);
            imgDiv1.style.transform = "translate(-50%,-50%)";
            imgDiv.appendChild(imgDiv1);
            mxUtils.makeDraggable(imgDiv, graph, funct);
            var mytoolBar=document.getElementById("tbContainer1");
            mytoolBar.appendChild(imgDiv);
            // return img;
        }

        // function addToolbarItemEdge(graph, toolbar1, prototype, image)
        // {
        //     // 添加、删除功能
        //     var funct = function(graph, evt, cell)
        //     {
        //         graph.stopEditing(false);
        //
        //         var pt = graph.getPointForEvent(evt);
        //         var edge = graph.getModel().cloneCell(prototype);
        //         edge.geometry.x = pt.x;
        //         edge.geometry.y = pt.y;
        //
        //         graph.addCell(edge);
        //         graph.setSelectionCell(edge);
        //     }
        //     // 创建拖动预览图标
        //     var img = toolbar.addMode(null, image, funct);
        //     mxUtils.makeDraggable(img, graph, funct);
        //     return img;
        // }

    </script>
</head>

<!-- 页面载入后启动程序. -->
<body onload="main();">
</body>
</html>